<template>
  <el-dialog
    v-model="visible"
    width="480px"
    :show-close="false"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    class="update-notice-dialog"
    center
  >
    <div class="update-notice">
      <div class="notice-header">
        <el-icon class="notice-icon"><BellFilled /></el-icon>
        <h3 class="notice-title">系统公告</h3>
      </div>
      <div class="notice-content">
        <p class="notice-message">机会页面数据已更新，包含更多新的实习/工作机会信息。点击机会栏目查看最新内容！</p>
        <ul class="notice-features">
          <li>新增 <strong>{{ newOpportunities }}</strong> 条实习/工作机会</li>
          <li>更新 <strong>{{ updatedOpportunities }}</strong> 条岗位信息</li>
          <li>添加更详细的岗位描述和要求</li>
        </ul>
      </div>
      <div class="notice-footer">
        <el-button type="primary" @click="handleConfirm" class="confirm-btn">知道了</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { BellFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  newOpportunities: {
    type: Number,
    default: 15
  },
  updatedOpportunities: {
    type: Number,
    default: 8
  }
});

const emit = defineEmits(['close']);
const visible = ref(false);
const router = useRouter();

const handleConfirm = () => {
  visible.value = false;
  emit('close');
};

onMounted(() => {
  // 检查用户是否已经在今天看过这个通知
  const lastShownDate = localStorage.getItem('updateNoticeShownDate');
  const today = new Date().toDateString();
  
  if (lastShownDate !== today) {
    // 如果今天没看过，展示通知
    setTimeout(() => {
      visible.value = true;
      // 记录已展示时间
      localStorage.setItem('updateNoticeShownDate', today);
    }, 1000);
  }
});
</script>

<style scoped>
.update-notice-dialog :deep(.el-dialog__header) {
  display: none;
}

.update-notice-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.update-notice {
  padding: 24px;
  border-radius: 8px;
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.notice-icon {
  font-size: 24px;
  color: #f5a623;
}

.notice-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.notice-content {
  margin-bottom: 24px;
}

.notice-message {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 16px;
}

.notice-features {
  padding-left: 20px;
  margin: 0;
}

.notice-features li {
  margin-bottom: 8px;
  color: #606266;
}

.notice-footer {
  display: flex;
  justify-content: center;
}

.confirm-btn {
  width: 120px;
  font-size: 16px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.update-notice-dialog :deep(.el-dialog) {
  animation: fadeIn 0.3s ease-out;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
</style> 